<template>
	<!-- 文本框 -->
	<template v-if="item.searchType == undefined || item.searchType == 'input'">
		<el-input v-model="searchParam[item.prop]" 
			:name="`${name}_${item.prop}`" :placeholder="`请输入${item.formLabel}`" :clearable="clearable(item)"
			@clear="handleClear"></el-input>
	</template>
	<!-- 下拉选择框 -->
	<template v-if="item.searchType == 'select' || item.searchType == 'multipleSelect'">
		<el-select
			v-model="searchParam[item.prop]"
			:multiple="item.searchType == 'multipleSelect'"
			:placeholder="`请选择${item.formLabel}`" filterable
			:name="`${name}_${item.prop}`"
			:clearable="clearable(item)"
			@clear="handleClear"
		>
			<el-option
				v-for="itemValue in item.enum"
				:key="itemValue.value"
				:label="itemValue.label"
				:value="itemValue.value"
				:disabled="itemValue.disabled"
			/>
		</el-select>
	</template>
	<!-- 下拉树形选择框 -->
	<template v-if="item.searchType == 'treeSelect' || item.searchType == 'multipleTreeSelect'">
		<el-tree-select 
			v-model="searchParam[item.prop]" :placeholder="`请选择${item.formLabel}`"
			:name="`${name}_${item.prop}`" filterable
			:multiple="item.searchType == 'multipleTreeSelect'" :data="item.enum" />
	</template>
	<!-- 日期选择 -->
	<template v-if="item.searchType == 'date'">
		<el-date-picker
			v-model="searchParam[item.prop]"
			value-format="YYYY-MM-DD"
			type="date"
			placeholder=" "
			:name="`${name}_${item.prop}`"
			:clearable="clearable(item)"
			@change="handleDateChange"
		/>
	</template>
	<!-- 时间范围选择 -->
	<template v-if="item.searchType == 'timerange'">
		<el-time-picker
			v-model="searchParam[item.prop]"
			is-range
			value-format="HH:mm:ss"
			range-separator="-"
			start-placeholder="开始时间"
			end-placeholder="结束时间"
			:name="`${name}_${item.prop}`"
			:clearable="clearable(item)"
			@change="handleDateChange"
		/>
	</template>
	<!-- 日期范围选择 -->
	<template v-if="item.searchType == 'daterange'">
		<el-date-picker
			v-model="searchParam[item.prop]"
			type="daterange"
			value-format="YYYY-MM-DD"
			range-separator="-"
			start-placeholder="开始时间"
			end-placeholder="结束时间"
			:name="`${name}_${item.prop}`"
			:clearable="clearable(item)"
			@change="handleDateChange"
		/>
	</template>
	<!-- 日期时间范围选择 -->
	<template v-if="item.searchType == 'datetimerange'">
		<el-date-picker
			v-model="searchParam[item.prop]"
			type="datetimerange"
			format="YYYY-MM-DD HH:mm"
			value-format="YYYY-MM-DD HH:mm"
			range-separator="-"
			:default-time="defaultTime"
			start-placeholder="开始时间"
			end-placeholder="结束时间"
			:name="`${name}_${item.prop}`"
			:clearable="clearable(item)"
			@change="handleDateChange"
		/>
	</template>
</template>

<script setup name="searchFormItem">

const defaultTime = [
	new Date(2000, 1, 1, 0, 0, 0),
	new Date(2000, 2, 1, 23, 59, 59),
] // '0:00:00', '23:59:59'
// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
const clearable = (item) => {
	return true;
};
const emits = defineEmits(['update:search'])
const handleClear = () => {
	emits('update:search')
}
const handleDateChange = (date) => {
	if (!date) {
		emits('update:search')
	}
}
defineProps({
	item: {
		type: Object,
		default: () => ({})
	},
	name: {
		type: String,
		default: ''
	},
	searchParam: {
		type: Object,
		default: () => ({})
	}
});
</script>
<style lang="less" scoped>

</style>